/*
 * @Author: fangshengchu
 * @Date: 2024-05-16 19:29:29
 * @LastEditTime: 2024-06-14 16:14:00
 * @LastEditors: fangshengchu
 * @Description:
 * @FilePath: \szhk-fe\src\common\components\collapse-btn\collapse-btn.jsx
 */
import { Fragment } from 'vue';
import { Dropdown, Doption } from '@arco-design/web-vue';
import lodash from 'lodash';
import { useUserStore } from '@/store';
// Create a <StyledTitle> Vue component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em

const DropdownBox = (props, { slots }) => {
  return (
    <Fragment>
      <a-space size={24}>
        {slots.default?.()}
        {slots.auto?.()?.length && (
          <Dropdown
            trigger={'click'}
            destroy-popup-on-hide={true}
            class={'dropdown-more-btn'}
            overlay-class-name="overlayrightmenuClassName"
            v-slots={{
              default: () => <icon-more style="color: rgb(var(--primary-6))" />,
              content: () => {
                return slots
                  .auto()
                  .filter((slotItem) => typeof slotItem.type !== 'symbol')
                  .map((btnSlot) => {
                    return <Doption>{btnSlot}</Doption>;
                  });
              },
            }}
          ></Dropdown>
        )}
      </a-space>
    </Fragment>
  );
};

const CollapseBtn = (props, { slots }) => {
  const defaultSlots = slots.default();
  const dataKey = props['data-key'] || '';
  let renderSlots = lodash.get(defaultSlots, dataKey);

  // console.log('slots', defaultSlots);
  // console.log('dataKey', dataKey);
  if (!renderSlots) {
    renderSlots = [];
  }
  const userStore = useUserStore();
  const { permissions } = userStore;
  renderSlots = renderSlots.filter((item) => {
    if (item?.dirs && item?.dirs.find((i) => i.dir.name === 'permission')) {
      const dir = item?.dirs.find((i) => i.dir.name === 'permission');
      // 先判断权限
      let hasPermission = false;
      permissions?.forEach((p) => {
        hasPermission = hasPermission || dir.value?.includes(p);
      });
      if (!hasPermission) return false;
    }
    return !item?.props?.hidden;
  });
  return (
    <div class="collapse-btn-more">
      {renderSlots.length <= 3 ? (
        <a-space size={24}>{renderSlots}</a-space>
      ) : (
        <Fragment>
          <DropdownBox
            v-slots={{
              default: () => renderSlots?.slice(0, 2),
              auto: () => renderSlots?.slice(2),
            }}
          ></DropdownBox>
        </Fragment>
      )}
    </div>
  );
};

export default CollapseBtn;
